<template>
  <cu-layout :bgStyle="{ color: '#ffffff' }" :navProp="{ placeholder: true }">
    <view :class="[`${prefixCls}-bindAccount-container`]">
      <view class="title">设置新的手机号</view>
      <view class="sub-title">请输入新的手机号作为登录账号</view>
      <uv-form ref="uvForm" labelPosition="left" :model="formData">
        <uv-form-item prop="code">
          <uv-input v-model="formData.phone" type="number" border="bottom" maxlength="11" fontSize="14px" placeholder="请输入您的新手机号"> </uv-input>
        </uv-form-item>
        <uv-form-item prop="code">
          <uv-input v-model="formData.code" type="number" border="bottom" maxlength="6" fontSize="14px" placeholder="请输入验证码">
            <template #suffix>
              <cu-verify-code
                mode="text"
                type="primary"
                :extends="verifyExtends"
                :customStyle="{ color: '#439DBC', fontSize: '14px' }"
                :mobile="formData.phone"
                mobileKey="phone"
              />
            </template>
          </uv-input>
        </uv-form-item>
        <uv-button type="primary" :customStyle="{ margin: '20px 0 10px', fontSize: '16px' }" @click="onSubmit">确认</uv-button>
        <cu-agreements v-model="formData.agreement" scope="register" @change="getAgreement"></cu-agreements>
      </uv-form>
    </view>
  </cu-layout>
</template>

<script>
import SingSRA from '@/common/sign/signSRA'
import { mapActions, mapGetters } from 'vuex'
import { changePhoneNumber } from './api'
export default {
  name: 'bindAccount',
  components: {},
  mixins: [],
  props: {},
  data() {
    return {
      formData: {
        agreement: false,
        phone: '',
        code: '',
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
    verifyExtends() {
      const antiData = {
        phone: this.formData.phone,
        uid: this.formData.phone,
        timestamp: new Date().getTime() / 1000,
      }
      return {
        anti_data: SingSRA.objRsaEncrypt(antiData),
        scene: 'updatePhone',
        useType: '变更手机号',
      }
    },
  },
  // 监听页面加载，该钩子被调用时data,computed,function,watch,props,slots已设置完成
  onLoad(options) {
    // console.log(
    //   '123123',
    //   uni.getSystemInfo().then((res) => {
    //     console.log('res', res)
    //   }),
    // )
  },
  // 监听页面显示，页面每次出现在屏幕上都触发
  onShow() {},
  // 监听页面初次渲染完成，此时组件已挂载完成
  onReady() {},
  // 下拉刷新
  onPullDownRefresh() {},
  // 加载更多
  onReachBottom() {},

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions('user', ['Logout']),
    getAgreement(e) {
      this.formData.agreement = e
    },
    async onSubmit() {
      const { agreement } = this.formData
      if (!agreement) {
        uni.$uv.toast('请阅读并勾选《用户协议》和《隐私政策》')
        return false
      }
      const { code, phone } = this.formData
      const { data, errcode } = await changePhoneNumber({ code, phone })
      if (errcode === 0) {
        uni.$uv.toast('修改成功,请重新登录')
        this.Logout()
        this.$ROUTE.go('/pages/main/user')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
page {
  background: white !important;
}
.#{prefixCls('bindAccount-container')} {
  position: relative;
  background: #ffffff;
  padding: 30px 20px;
  .title {
    font-size: 40rpx;
    font-weight: bold;
  }
  .sub-title {
    margin: 20px 0 30px;
    font-size: 30rpx;
    color: #666666;
  }
}
</style>
